<template>
    <div class="app-container">
        <div class="block">
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-input v-model="listQuery.name" size="mini" placeholder="请输文件名称" />
                </el-col>
                <el-col :span="6">
                    <el-button type="success" size="mini" icon="el-icon-search" @click.native="search">{{
                        $t('button.search') }}</el-button>
                    <el-button type="primary" size="mini" icon="el-icon-refresh" @click.native="reset">{{ $t('button.reset')
                    }}</el-button>
                </el-col>
            </el-row>
            <br>
            <el-row>
                <el-col :span="24">
                    <el-button v-permission="['/fileUD/add']" type="success" size="mini" icon="el-icon-plus"
                        @click.native="openUploadModal">{{ $t('button.add') }}</el-button>
                </el-col>
            </el-row>
        </div>
        <el-table :data="list" style="width: 100%">
            <el-table-column label="上传人" prop="creator"></el-table-column>
            <el-table-column label="上传时间" prop="createTime"></el-table-column>
            <el-table-column label="文件名" prop="fileName"></el-table-column>
            <el-table-column label="文件类型" prop="fileType"></el-table-column>
            <el-table-column label="描述" prop="description"></el-table-column>
            <el-table-column label="二维码">
                <template slot-scope="scope">
                    <!-- Use dynamic id for the canvas based on fileName -->
                    <canvas :id="'QRCode_' + scope.row.fileName"></canvas>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" @click="downloadFile(scope.row.fileName)">下载</el-button>
                    <el-button v-permission="['/fileUD/del']" type="danger" @click="deleteFile(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination background layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 20, 50, 100, 500]"
            :page-size="listQuery.pageSize" :total="total" @size-change="changeSize" @current-change="fetchPage"
            @prev-click="fetchPrev" @next-click="fetchNext" />

        <el-dialog title="文件上传" :visible.sync="uploadModalVisible">
            <!-- File Input and Remarks Input -->
            <!-- <el-upload class="upload-demo" action="/file/fileUp1oad/upload" :show-file-list="false"
                :before-upload="beforeUpload">
                <el-button size="small" type="primary">点击上传</el-button>
            </el-upload> -->
            <el-upload  class="upload-demo" ref="xlsUpload" action=""
                :show-file-list="true"  :headers="headers" :http-request="handleFileUpload">
            <el-button  type="primary">点击上传</el-button>
          </el-upload>
            <!-- <input type="text" v-model="remarks" placeholder="Enter remarks" /> -->

            <!-- <el-upload class="upload-demo" action="http://localhost:7214/file/fileUpload/upload" :show-file-list="false"
                :before-upload="beforeUpload">
                <el-button size="small" type="primary">点击上传</el-button>
            </el-upload> -->
            <el-input v-model="form.remarks" placeholder="请输入备注" style="margin-top: 10px;"></el-input>

            <!-- Confirm and Cancel Buttons -->
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeUploadModal">取消</el-button>
                <el-button type="primary" @click="handleUpload">确认上传</el-button>
            </div>
        </el-dialog>

    </div>
</template>
  
<script src="./fileUploadAndDown.js"></script>